<template>
  <div class="dialogContent" v-if="visited">
    <div class="textContent">
      <div class="dialogTitle">
        <div>详情信息</div>
        <div @click.stop="closeFn">关闭</div>
      </div>
      <div class="listContent">
        <div class="messageImte">
          <div class="headImg"><img :src="row.head_img_url" /></div>
          <div class="autoList">
            <div class="nameTop">
              <div>{{ row.user_name }}</div>
              <div>{{ row.update_time }}</div>
            </div>
            <div>{{ row.advisory_message_type | messtype }}</div>
            <div>{{ row.content }}</div>
          </div>
        </div>
        <div class="messageImte">
          <div class="headImg">
            <!-- <img :src="userInfo.avatar" /> -->
            <img :src="defhead" />

            </div> 
          <div class="autoList">
            <el-button type="primary" @click="replyMessFn" v-if="!replyOpen" >
              写回复
            </el-button >
            <div v-else>
              <el-form :model="formData">
                <el-form-item label="">
                  <el-select
                    v-model="formData.selectData"
                    type="select"
                    @change="getDeatailFn"
                  >
                    <el-option
                      v-for="(item, index) in options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="">
                  <el-input
                    v-model="formData.areaData"
                    placeholder=""
                    type="textarea"
                  ></el-input>
                </el-form-item>
              </el-form>
              <el-button type="primary" @click="replaySendFn">回复</el-button>
            </div>
          </div>
        </div>
        <div
          class="messageImte"
          v-for="(item, index) in newMessData"
          :key="index"
        >
          <div class="headImg"><img v-if="item.content_type ==1" :src="row.head_img_url"/> <img v-else  :src="defhead" /> </div>
          <div class="autoList">
            <div class="nameTop">
              <div>{{ item.headImgUrl }}</div>
              <div>{{ item.reply_time }}</div>
            </div>
            <div>{{ item.reply_content }}</div>
          </div>
        </div>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="dialogPage.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dialogPage.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { common } from "@/api/cat/httpRequest";
import defhead from '../../../../../public/img/mock/defhead.png'
import {
  pcAuthorAdvisoryReply,
  reply,
  selectTemplate,
  selectAdvisoryTypeList,
} from "@/api/cat/baseUrls";
let that
export default {
  name: "dialogMy",
  props: ["row", "messData", "dialogPage",],
  data() {
    return {
      defhead:defhead,
      replyOpen: false,
      localClass: [],
      formData: {
        selectData: "",
        areaData: "",
      },
      options: [],
      visited: false,
      currentPage: 1,
      page: {
        total: 0,
        pageSize: 10,
      },
      newMessData: this.messData,
      userInfo: this.$store.state.user.userInfo,
    };
  },
  beforeCreate() {
    that = this
     let res = common(selectAdvisoryTypeList.selectAdvisoryTypeList);
       res.then(value=>{
      this.localClass =value.data
       });
  },
  filters: {
    messtype: function (val) {
      for(let i=0;i<that.localClass.length;i++){
          if (that.localClass[i].id == val) {
          return that.localClass[i].message_title;
        }
      }
 
    },
  },
  watch: {
    messData(newVal) {
      this.newMessData = newVal;
    },
  },
  methods: {
    //选择模板
    getDeatailFn(val) {
      this.formData.areaData = val;
    },
    //回复
    async replaySendFn() {
      let reponse = await common(
        reply.reply,
        {
          advisory_id: this.row.id,
          reply_content: this.formData.areaData,
          reply_user_id: this.userInfo.id,
          reply_user_name: this.userInfo.name,
        },
        {},
        "POST"
      );
      if (reponse.code == 1) {
        this.replyOpen = false;
        this.getList();
        this.$emit('refresh')
      }
    },
    //显示回复框
    async replyMessFn() {
      this.replyOpen = true;
      let response = await common(selectTemplate.selectTemplate);
      console.log(response, "模板列表");
      response.data.forEach((element) => {
        let item = { label: "", value: "" };
        item.label = element.title;
        item.value = element.content;
        this.options.push(item);
      });
    },
    async getList() {
      let response = await common(
        pcAuthorAdvisoryReply.pageAndParam,
        { advisory_id: this.row.id },
        this.page,
        "POST"
      );
      this.page = response.page;
      this.newMessData = response.data;
    },
    openOrCloseFn() {
      if (this.visited) {
        this.visited = false;
      } else {
        this.visited = true;
      }
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getList();
    },
    closeFn() {
      this.visited = false;
    },
     getMessType() {
      let res = common(selectAdvisoryTypeList.selectAdvisoryTypeList);
       res.then(value=>{
      this.localClass =value.data

       });
    },
  },
  mounted() {
  },
};
</script>
<style scoped>
.listContent {
  margin-top: 20px;
}
.messageImte {
  display: flex;
  padding: 15px;
}
.headImg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 15px;
}
.headImg img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.autoList {
  flex: 1;
}
.writeReply {
  line-height: 80px;
}
.nameTop {
  display: flex;
  justify-content: space-between;
  width: 80%;
}
.dialogContent {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.textContent {
  width: 60%;
  background: #fff;
  border-radius: 6px;
  padding: 15px;
  height: 750px;
  overflow-y: scroll;
}
.dialogTitle {
  display: flex;
  justify-content: space-between;
}
</style>